<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>学生信息管理</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            color: #721c24;
        }

        h1 {
            text-align: center;
            color: #333;
            margin: 20px 0;

        }

        table {
            margin: 0 auto;
            width: 800px;
            border-collapse: collapse;
            color: #004085;
        }

        th {
            padding: 10px;
            background: #cfe5ff;

            font-size: 20px;
            font-weight: 400;
        }

        td,
        th {
            border: 1px solid #b8daff;
        }

        td {
            padding: 10px;
            color: #666;
            text-align: center;
            font-size: 16px;
        }

        tbody tr {
            background: #fff;
        }

        tbody tr:hover {
            background: #e1ecf8;
        }

        .info {
            width: 900px;
            margin: 50px auto;
            text-align: center;
        }

        .info input,
        .info select {
            width: 80px;
            height: 27px;
            outline: none;
            border-radius: 5px;
            border: 1px solid #b8daff;
            padding-left: 5px;
            box-sizing: border-box;
            margin-right: 15px;
        }

        .info button {
            width: 60px;
            height: 27px;
            background-color: #004085;
            outline: none;
            border: 0;
            color: #fff;
            cursor: pointer;
            border-radius: 5px;
        }

        .info .age {
            width: 50px;
        }
    </style>
</head>

<body>
    <h1>新增学员</h1>
    <form class="info" autocomplete="off">
        姓名：<input type="text" class="userName" name="userName" />
        年龄：<input type="text" class="age" name="age" />
        性别:
        <select name="gender" class="gender">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        薪资：<input type="text" class="salary" name="salary" />
        就业城市：<select name="city" class="city">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
            <option value="曹县">曹县</option>
        </select>
        <button class="add" type="submit">录入</button>
    </form>

    <h1>就业榜</h1>
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>薪资</th>
                <th>就业城市</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        const userName = document.querySelector('.userName')
        const age = document.querySelector('.age')
        const gender = document.querySelector('.gender')
        const salary = document.querySelector('.salary')
        const city = document.querySelector('.city')
        const tbody = document.querySelector('tbody')
        const form = document.querySelector('.info')
        // 获取所有带name属性的元素
        const items = document.querySelectorAll('[name]')

        const studentArr = []

        form.addEventListener('submit', function (e) {
            // 阻止表单默认提交行为
            e.preventDefault()
            // 表单校验
            for(let i = 0; i < items.length; i++){
                if (items[i].value === '') {
                    return alert('输入内容不能为空')
                }
            }

            // 提交时创建新的对象
            const student = {
                stuId: studentArr.length + 1,
                userName: userName.value,
                age: age.value,
                gender: gender.value,
                salary: salary.value,
                city: city.value,
            }
            // 将对象添加到数组
            studentArr.push(student)
            // 重置表单
            this.reset()
            render()
        })

        // 删除员工
        tbody.addEventListener('click', function (e) {
            if (e.target.tagName === 'A') {
                studentArr.splice(e.target.dataset.id, 1)
            }
            render()
        })

        // 渲染函数
        function render() {
            // 清空tbody防止重复渲染
            tbody.innerHTML = ''
            for (let i = 0; i < studentArr.length; i++) {
                const tr = document.createElement('tr')
                tr.innerHTML = `
                    <td>${studentArr[i].stuId}</td>
                    <td>${studentArr[i].userName}</td>
                    <td>${studentArr[i].age}</td>
                    <td>${studentArr[i].gender}</td>
                    <td>${studentArr[i].salary}</td>
                    <td>${studentArr[i].city}</td>
                    <td>
                        <a href="javascript:" data-id = ${i}>删除</a>
                    </td>
                `
                tbody.appendChild(tr)
            }
            console.log(studentArr);
        }
    </script>
</body>

</html>